<template>
    <div class="containbox">
        <!-- 头部 -->
        <mt-header title="特色礼品">
            <router-link to="/index" class="mui-icon mui-icon-arrowleft" slot="left">
            </router-link>
            <a class="mui-icon mui-icon-bars" slot="right" @click="isShow=!isShow"></a>
        </mt-header>
        <!-- 右侧more按钮的列表 -->
        <sort v-if="isShow"></sort>
        <!-- 商品列表 -->
        <div class="cates">
            <transition-group appear tag="ul" class="cates-content">
                <li v-for="(val, i) in giftscate" :key="i">
                    <a href="#" class="title">{{val.title}}</a>
                    <ul class="details">
                        <li v-for="(item, index) in val.detail" :key="index">
                            <a href="#">{{item.a}}</a>
                            <a href="#">{{item.b}}</a>
                        </li>
                    </ul>
                </li>
            </transition-group>
        </div>


    </div>
</template>
<script>
import Vue from "vue";

// 导入底部导航栏组件
import sort from "./navsort.vue";
import giftsCateData from "./data/giftcate.json";
export default {
  data() {
    return {
      isShow: false,
      giftscate: giftsCateData
    };
  },
  methods: {},
  components: {
    sort
  }
};
</script>
<style lang="less" scoped>
a {
    text-decoration: none;
    color: #666;
}

// 头部
.mint-header {
  height: 44px;
  color: #666;
  background-color: rgba(250, 250, 250, 0.9);
  border-bottom: 1px solid #e4e4e4;
}
// 导航栏
.cates {
    height: 300px;
    background-color: #f4f4f4;
    padding:10px;
    .cates-content {
        background-color: #fff;
        font-size: 0.75rem;
        border: 1px solid #e4e4e4;
        border-radius: 5px;
        a {
            display: inline-block;
        }
        li {
            .title {
                padding-left: 10px;
                border-bottom: 1px solid #e4e4e4;
                width: 100%;
                line-height: 38px;
                font-weight: 700;
            }
            .details {
                li {
                    padding: 10px;
                    border-bottom: 1px solid #e4e4e4;
                    a {
                        width: 49%;
                        text-align: center;
                        &:nth-of-type(2n+1) {
                            border-right: 1px solid #e4e4e4;
                        }
                    }
                }
                
            }
        }
    }
}
</style>